<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>首页</title>
		<link type="text/css" href="css/reset.css" rel="stylesheet"/>
		<link type="text/css" rel="stylesheet" href="css/all.css" />
		<script src="js/flexible.min.js"></script>
		<script src="js/jquery.1.11.3.min.js"></script>
		<script src="js/main.js"></script>
	</head>
	<body>
		<!------------------------------------------头部--------------------------------->
		<div class="sjle_head">
			<a href="index.html">
				<img src="img/img19.png" class="back_sjlb">
			</a>
			<div class="select_d">
				<img src="img/img14.png" class="select_d_img">
				<input type="text" class="select_d_btn" id="select_d_btn" name="select_d_btn" placeholder="搜索店铺商品" />
			</div>
			<div class="sjle_head_con">
				<img src="img/img13.png" class="sjle_head_img">
				<h1>肯德基宅急送（海悦天地店）</h1>
				<h2><img src="img/img18.png">欢迎光临肯德基(海悦天地店),我们将最好的服务...</h2>
				<p><img src="img/piao.png"> 本店支持开发票，发票金额0元起。</p>
			</div>
			
		</div>
		<!------------------------------------------切换--------------------------------->
		<div class="container-tabs">
			<div class="menu-tabs">
				<a class="selected diancai" href="javascript:void(0);">
					<span>点菜</span>
				</a>
				<a class="shangjia" href="javascript:void(0);">
					<span>商家</span>
				</a>
			</div>
		</div>
		<!--点菜-->
		<div class="menuwrap" >
			<!--左侧-->
			<div class="asidewrap">
				<div class="taglist">
					<div class="j-tag tag focus">
						<div class="tag-inner">
							<span class="tag-text"> 
								<img class="tag-icon" src="img/hot.png" alt="">  热销
							</span>
						</div>
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  热菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>	
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>	
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>
					<div class="j-tag tag"> 
						<div class="tag-inner">
							<span class="tag-text">  凉菜</span>
						</div> 
					</div>	
				</div>
			</div>
			<!--右侧-->
			<div class="mainwrap">
				<div class="foodlistwrap">
					<div class="j-foodlist foodlist">
						<h3 class="foodlist-label">热销</h3>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
						<div class="j-fooditem fooditem clearfix">
							<div class="food-pic-wrap">
								<img src="img/img11.png"/>
							</div>
							<div class="food-cont-wrap">
								<div class="food-cont">
									<div class="j-foodname foodname">有机花菜炒番茄</div>
									<div class="food-content-sub"> 
										<span>商品介绍</span>
										<span>月售&nbsp;216</span> 
									</div>
									<div class="food-price-region">  
										<span class="food-price">¥9</span> 
									</div>
									<div class="j-item-console foodop clearfix"> 
										<a class="j-add-item add-food" href="javascript:;">
											<i class="icon i-add-food"><img src="img/jia.png"/></i>
										</a> 
										<span class="j-item-num foodop-num" style="display:none">0</span>
										<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
											<i class="icon i-remove-food"><img src="img/jian.png"/></i>
										</a> 
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="foodlistwrap"></div>
			</div>
			<div id="cart" class="cart">
                <div class="cart-tip">
                    <div class="j-cart-icon cart-icon" onclick="gwc_alert_show();">
                        <i class="j-ico-cart ico-cart"></i>
                        <div class="j-cart-num cart-num">0</div>
                    </div>
                    <div class="j-cart-empty cart-empty">购物车空空如也～</div>
                    <!-----------------------------切换------------------------------------>
                    <div class="gwc_xuanzhong" style="display: none;">
	                    <div class="ssjg_num">￥25</div>
			             <a href="#">
			        	<p class="ssjg_tjdd">提交订单</p>
                    </div>
                    <!-----------------------------切换------------------------------------>
                </div>
                <div class="cart-btns">
                    <a class="cart-btn-unavail"><span class="inner">点击添加进行选购</span></a>
                </div>
            </div>
		</div>
		<!--商家-->
		<div class="detail-wrap" style="display: none;">
			<div class="detail-region">
				<div class="detail-content">
					<div class="detail-phone">
						<img src="img/dili.png" class="ad_img">  
						<span class="call-phone j-call-phone">
							<img src="img/dianhua.png"/ onclick="tel_alert_show();">
						</span>  
						<p>石家庄中华南大街626号</p> 
					</div>
					<div class="sj_i">
						<img src="img/img13.png">
						<img src="img/img13.png">
						<img src="img/img13.png">
						<img src="img/img13.png">
					</div>
					<div class="detail-service">
						<i class="rest-ico"></i>
						<p style="margin-left: 30px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">欢迎光临肯德基（海悦天地店），我们将最好的服务...</p>    
					</div>
					<div class="detail-time">
						<i class="rest-ico"></i>
						<span class="rest-txt">营业时间：</span> 
						<p>全天24小时</p>
					</div>
				</div>
				<div class="line_w"></div>
				<div class="detail-content">
					<div class="detail-time">
						<i class="rest-ico rest-ico_sj"></i> 
						<p class="sjfw"><span>商家服务</span><img src="img/piao.png"><span>可开发票</span><img src="img/jiani.png"><span>消费可减</span></p>
					</div>
					<div class="detail-phone">
						<img src="img/anquan.png" class="aq_img">   
						<p>商家已通过联盟认证</p> 
					</div>
				</div>
			</div>
		</div>
		<!------------------------------------------电话弹出框----------------------------------------------->
		<div class="tel_alert" style="display: none;">
			<p class="tel_alert_text">拨打电话</p>
			<p class="tel_alert_num">0310-57446587</p>
			<p class="tel_alert_qx" onclick="tel_alert_hide();">取消</p>
		</div>
		<!------------------------------------------遮罩层----------------------------------------------->
		<div class="overlay" onclick="tel_alert_hide();gwc_alert_hide();"></div>
		<!------------------------------------------购物车弹出框----------------------------------------------->
		<div class="gwc_alert" style="display: none;">
			<div class="gwc_alert_tit">
				<p class="cp">餐盘</p>
				<p class="cp_qk">清空餐盘</p>
				<img class="cp_qk_img" src="img/shanchu.png">
			</div>
			<ul class="gwc_alert_ul">
				<li class="gwc_alert_li">
					<h1>阳光蛋</h1>
					<div class="j-item-console gwc_j fr"> 
						<a class="j-add-item add-food" href="javascript:;">
							<i class="icon i-add-food"><img src="img/jia.png"/></i>
						</a> 
						<span class="j-item-num foodop-num" style="display:none">0</span>
						<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
							<i class="icon i-remove-food"><img src="img/img21.png"/></i>
						</a> 
					</div>
					<h2>￥5</h2>
				</li>
				<li class="gwc_alert_li">
					<h1>阳光蛋</h1>
					<div class="j-item-console gwc_j fr"> 
						<a class="j-add-item add-food" href="javascript:;">
							<i class="icon i-add-food"><img src="img/jia.png"/></i>
						</a> 
						<span class="j-item-num foodop-num" style="display:none">0</span>
						<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
							<i class="icon i-remove-food"><img src="img/img21.png"/></i>
						</a> 
					</div>
					<h2>￥5</h2>
				</li>
				<li class="gwc_alert_li">
					<h1>阳光蛋</h1>
					<div class="j-item-console gwc_j fr"> 
						<a class="j-add-item add-food" href="javascript:;">
							<i class="icon i-add-food"><img src="img/jia.png"/></i>
						</a> 
						<span class="j-item-num foodop-num" style="display:none">0</span>
						<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
							<i class="icon i-remove-food"><img src="img/img21.png"/></i>
						</a> 
					</div>
					<h2>￥5</h2>
				</li>
				<li class="gwc_alert_li">
					<h1>阳光蛋</h1>
					<div class="j-item-console gwc_j fr"> 
						<a class="j-add-item add-food" href="javascript:;">
							<i class="icon i-add-food"><img src="img/jia.png"/></i>
						</a> 
						<span class="j-item-num foodop-num" style="display:none">0</span>
						<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
							<i class="icon i-remove-food"><img src="img/img21.png"/></i>
						</a> 
					</div>
					<h2>￥5</h2>
				</li>
				<li class="gwc_alert_li">
					<h1>阳光蛋</h1>
					<div class="j-item-console gwc_j fr"> 
						<a class="j-add-item add-food" href="javascript:;">
							<i class="icon i-add-food"><img src="img/jia.png"/></i>
						</a> 
						<span class="j-item-num foodop-num" style="display:none">0</span>
						<a class="j-remove-item remove-food" style="display:none" href="javascript:;">
							<i class="icon i-remove-food"><img src="img/img21.png"/></i>
						</a> 
					</div>
					<h2>￥5</h2>
				</li>
			</ul>
		</div>
	</body>
	<script>
		$(function(){
				$('.menu-tabs a').click(function(){
					$(this).addClass('selected').siblings().removeClass('selected');
					console.log(this);
				});
			// 数量减
			$(".remove-food").click(function() {
				
				
				var num=parseInt($(this).parent().children(".foodop-num").text()); //得到商品的数量
			  	console.log(num);
			  	/***var sum=parseInt($(".cart-num").text());
			  	sum=num-1;***/
			  	
			  	var sum2=null;
				  $(".foodop-num").each(function(){
				      sum2+=+$(this).text();//+表示把 字符串的数字转换为 number的数字
				  });
			  	sum3=sum2-1;
			  	
			  	$('.cart-num').text(sum3);
				
				
				
				var t = $(this).parent().find('.foodop-num');
				t.text(parseInt(t.text()) - 1);
				
				

				if (t.text() <= 0) {
					t.hide();
					t.parent().find('.remove-food').hide();
					
				}
				
				if(sum3 <= 0){
					$('.cart .ico-cart').css('background-image','url(img/shop.png)');
					$('.cart .cart-num').hide();
					$('.gwc_xuanzhong').hide();
					$('.cart-empty').show();
					$('.cart-btns').show();
				}
				
				
			});
			// 数量加
			$(".add-food").click(function() {
				
				var num=parseInt($(this).parent().children(".foodop-num").text()); //得到商品的数量
			  	console.log(num);
			  	/***var sum=parseInt($(".cart-num").text());
			  	sum=num+1;***/
			  	
			  	var sum2=null;
				  $(".foodop-num").each(function(){
				      sum2+=+$(this).text();//+表示把 字符串的数字转换为 number的数字
				  });
			  	sum3=sum2+1;
			  	$('.cart-num').text(sum3);
				
				
				$(this).parent().find('.foodop-num').show();
				$(this).parent().find('.remove-food').show();
				$('.cart .ico-cart').css('background-image','url(img/shop1.png)');
				$('.cart .cart-num').show();
				$('.gwc_xuanzhong').show();
				$('.cart-empty').hide();
				$('.cart-btns').hide();
				var t = $(this).parent().find('.foodop-num');
				t.html(parseInt(t.html()) + 1);
				if (t.text() <= 1) {
					t.text(1);
				}
				
			});
			
		});
		
		
		$('.diancai').click(function(){
			$('.menuwrap').show();
			$('.detail-wrap').hide();
		});
		$('.shangjia').click(function(){
			$('.menuwrap').hide();
			$('.detail-wrap').show();
		});
		$('.j-tag').click(function(){
			$('.j-tag').removeClass('focus');
			$(this).addClass('focus');
		});
	</script>
</html>
